<template>
  <el-dialog v-model="dialogTableVisible" title="详情">
    <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="姓名" prop="pass">
      <el-input v-model="ruleForm.user" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="ruleForm.age" />
    </el-form-item>
    <el-form-item label="余额" prop="price">
      <el-input v-model.number="ruleForm.price" />
    </el-form-item>
    <el-form-item label="Age" prop="age">
      <el-select v-model="ruleForm.gender" placeholder="选择性别">
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </el-form-item>
    <!-- <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)"
        >Submit</el-button
      >
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item> -->
  </el-form>
    <div style="height: 60px;display: flex;align-items: center; justify-content: center;">
      <el-button type="primary" plain @click="dialogTableVisible = false">保存</el-button>
      <el-button type="danger" plain @click="dialogTableVisible = false">关闭</el-button>
    </div>
  </el-dialog>
  <el-table
    ref="multipleTableRef"
    :data="userList"
    style="width: 100%; height: 600px; margin-bottom: 20px; margin-top: 100px"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="index" width="80" label="序号" align="center"/>
    <el-table-column property="age" label="年龄" align="center"/>
    <el-table-column property="user" label="姓名" align="center"/>
    <el-table-column property="price" label="余额" align="center"/>
    <el-table-column property="gender" label="性别" show-overflow-tooltip align="center"/>
    <el-table-column  label="操作" show-overflow-tooltip align="center">
      <template #default="scope">
        <el-button size="small" type="danger" @click.prevent="removeBtn(scope.row)">删除</el-button><el-button size="small" type="success" @click.prevent="getUserInfo(scope.row)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

let userList = ref([])
let total = ref(0)
let currentPage4 = ref(1)
let pageSize4 = ref(10)
let isLoading = ref(false)
let dialogTableVisible = ref(false)
let ruleForm = reactive({
  user: '',
  age: '',
  price: '',
  gender: ''
})
let rules = reactive({
  user: [{ validator: validatePass, trigger: 'blur' }],
  gender: [{ validator: validatePass, trigger: 'blur'}]
})

function getUserList(page=0, size=10) {
  isLoading.value = true
  axios({
    url: 'http://127.0.0.1/api/getUserNameList',
    params: {
      page: page,
      size: size,
    }
  }).then(res => {
    if(res.data.status === 200) {
      userList.value = res.data.queryData.list
      total.value = res.data.queryData.count
    } else {
      ElMessage('获取用户数据失败')
    }
    isLoading.value = false
  })
}
getUserList()

function removeBtn(obj) {
  ElMessageBox.confirm(
    '是否删除当前用户',
    {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 删除操作
      axios({
        method: 'post',
        url: 'http://127.0.0.1/api/upDateUserNameStatus',
        data: {
          id: obj.id,
          status: 0
        }
      }).then(res => {
        if(res.data.status === 200) {
          ElMessage({
            type: 'success',
            message: '删除用户成功'
          })
          getUserList(currentPage4.value, pageSize4.value)
        } else {
          ElMessage({
            type: 'error',
            message: '删除用户失败'
          })
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

// 获取用户信息
function getUserInfo(data) {
  console.log(data)
  dialogTableVisible.value = true
}

// 当前页有多少条
const handleSizeChange = (val) => {
  pageSize4.value = val
  getUserList(currentPage4.value, val)
}
// 当前在多少页
const handleCurrentChange = (val) => {
  currentPage4.value = val
  getUserList(val, pageSize4.value)
}



</script>

<style>
  .demo-pagination-block{
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>